<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<style>
	body {
		font-family: helvetica;
		background-color: rgb(25,25,25);
		color: rgb(80,135,25) !important;
		text-shadow: 1px 1px 20px rgb(80,150,25);
	}

  .label {
    position: absolute;
    left: 0.5em;
    top: 1.75em;
  }

  .input {
    height: 30px;
    padding:10px;
    background-color: rgb(50,50,50);
    color: rgb(250,50,50);
  }

  .tall { height: 5em; }
</style>

<div class="center"><span class="shout" id="peers">0</span> peers <span class="shout" id="time">0</span> min <span class="shout" id="nodes">0</span> nodes <span class="shout" id="hours">0</span> hours <span class="shout" id="block">0</span> block <span class="shout" id="stack">0</span> stack</div>

<input id="url" class="center input crack" placeholder="enter peer stats source url">

<div class="center row charts">
</div>

<div class="model none">
	<div class="chart"><span class="label"></span><canvas class="tall row"></canvas></div>
</div>


<script src="./jquery.js"></script>
<script src="./smoothie.js" charset="utf-8"></script>
<script>
  if(window.location.search){url.value = window.location.search.split("?")[1]}
  var up, br = 0, bt = 0, tmp;
  var fetchData = async function(){
    // fetch the data from server
    var S = +new Date;
    var data = await (await fetch(url.value||(location.origin+'/gun/stats.radata'), {method: 'GET',mode: 'cors'})).json();
    $('#block').text(((br += (+new Date - S)/1000) / ++bt).toFixed(1));
    data.over = (data.over/1000) || 15;
		$('#stack').text((data.cpu||'').stack);
    $('#peers').text(data.peers.count);
		$('#time').text((data.peers.time / 1000 / 60).toFixed(0));
		$('#nodes').text(data.node.count);
		$('#hours').text((data.up.time / 60 / 60).toFixed(1));
    if(data.up.time === up){ console.log("up same as before") } up = data.up.time;

    ;(async function(){ try{
      Stats('peers#').line.append(+new Date, data.peers.count);
      return;
      Stats('cpu%');
      tmp = await (await fetch(new Request(location.origin+'/gun/stats.top.radata'), {method: 'GET',mode: 'cors'})).text();
      tmp = parseFloat((tmp.split('\n').filter(l => l.indexOf('node')+1)[0]||'').split(/\s+/).slice(-4)[0]||'0');
      Stats('cpu%').line.append(+new Date, tmp);
    }catch(e){console.log(e)}}());

		Stats('memory').line.append(+new Date, data.memory.heapTotal / 1024 / 1024);
    try{ Stats('dam # in/s').line.append(+new Date, Math.round(data.dam.in.count / data.over)); }catch(e){}
    try{ Stats('dam in MB/s').line.append(+new Date, data.dam.in.done / 1024 / 1024 / data.over); }catch(e){}
    try{ Stats('dam # out/s').line.append(+new Date, Math.round(data.dam.out.count / data.over)); }catch(e){}
    try{ Stats('dam out MB/s').line.append(+new Date, data.dam.out.done / 1024 / 1024 / data.over); }catch(e){}

    console.log('data',data);

    //fetch keys in all, these may be dynamically changing
    //for each key, check if we already have created a time series, if not, create it and add it
    // to the chart corredsponding to the unit of measure
    $.each(data.all, function(key, arr){
    	var chart = Stats(key);
      // get data and append to line
      // get the arrays inside the key
      //for each array append the data to the line
      for(var i in arr) {
        // append data [timestamp], [data]
        chart.line.append(arr[i][0], arr[i][1]);
      }
    });
  }
  //setInterval(fetchData, 15 * 1000);
  setInterval(fetchData, 5000);
  fetchData();

  function Stats(key, chart){
    // if we have already created, get data to append to it.
  	if(chart = Stats[key]){
  		return chart;
  	}
		// create a new Series for this key
		// add it into the map
		chart = Stats[key] = new SmoothieChart({millisPerPixel:500, limitFPS: 16, responsive: true, minValue: 0, grid:{strokeStyle:'rgba(100%,100%,100%,0.2)'},labels:{fontSize:20}, grid: {verticalSections: 0, millisPerLine: 15000 * 4 /*, strokeStyle:'rgb(125, 0, 0)'*/}});
		chart.line = new TimeSeries();
		chart.addTimeSeries(chart.line,{ strokeStyle:'rgb('+Math.random()*255+', '+Math.random()*255+','+Math.random()*255+')', lineWidth:5 });
		chart.canvas = $('.model').find('.chart').clone(true).appendTo('.charts');
		chart.canvas.find('span').text(key);
		chart.streamTo(chart.canvas.find('canvas').get(0), 15 * 1000);
    chart.line.append(0, 0);
		// check first two characters of key to determine other charts to add this in
		// tbd later
		return chart;
  }
  ;(function(){
  if('https' != (''+location).slice(0,5) && "localhost" != location.hostname){
    $('body').append("<button id='https'>click here to try generating https certs</button>");
    if(/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/.test(location.hostname)){
      $('#https').text("Link this IP address to a Domain by adding an `A Record` to your DNS settings that point to `"+ location.hostname +"` (we recommend the `name/host` be any subdomain you want, like `relay`, but if you want the root domain itself to directly point here use `*`). Then come back here on the domain & click this button to generate HTTPS certificates.");
      return;
    }
    $('body').append("<input id='email' placeholder='email'/>");
    $('#https').on('click', function(){
      $(this).text("look at console.log for errors, if none, try https");
      var gun = GUN(location.origin + '/gun');
      if(!$('#email').val()){
        $(this).text("email necessary for certs! Type it in & click here again.");
        return;
      }
      setTimeout(function(){
        gun._.opt.mesh.say({dam: 'service', try: 'https', email: $('#email').val(), domain: location.hostname});
        setTimeout(function(){
          if(gun._.opt.mesh.near){ return }
          $('#https').text("It might have worked! try HTTPS!");
        }, 9000);
      }, 999);
    });
  }
  }());
/*
  Notes to Self about Debugging:
  1. Read Disks can spike up to 1min, I suspect other operations are blocking it from resolving as fast as it otherwise would.
  2. JSON parsing/stringifying sometimes way slower than other times, why?
  3. Looks like RAD lex read is not optimized.
  4. got prep + got emit = non-RAD problems, compare against read disk & got differentials (should be same).
  5. Radix map/place ops could be slow?
  6. SINGLE MESSAGE PROCESS TIME occasionally is huge, should get emailed.
  7. Watch out for get/put loops times, maybe indicating (5) issues?
*/
</script>
<script src="../gun.js"></script>
</body>
</html>